<template>
  <q-page ref="MusicPage" class="bg-grey-10" style="padding-top:50px">


      <music-list v-if="curTab =='library'" ref="MusicList" :isLoading="isLoading" :musicList.sync="musicList" @update="handleItemClick"  :isPlay="isPlay" :typeOptions="typeOptions" @reload="handleReload"></music-list>

      <music-list v-if="curTab =='collection'" ref="MusicList" :isLoading="isLoading"  :musicList.sync="collectionList" :tab="curTab" @update="handleItemClick" :isPlay="isPlay" :typeOptions="typeOptions" @reload="handleReload"></music-list>

      <music-list v-if="curTab =='like'" ref="MusicList" :isLoading="isLoading"  :musicList.sync="likeList" :tab="curTab" @update="handleItemClick" :isPlay="isPlay" :typeOptions="typeOptions" @reload="handleReload"></music-list>
      <q-inner-loading :showing="isLoading" class="bg-grey-9">
        <q-spinner-gears size="50px" color="primary" />
        数据加载中
    </q-inner-loading>

      <q-page-sticky expand position="top" class="items-start" style="height:50px">
          <div class="bg-dark full-width full-height row items-center ">
              <q-breadcrumbs v-if="curTab=='library'" class="q-px-sm text-primary">
                  <q-breadcrumbs-el label="全部" icon="widgets" />
                  <q-breadcrumbs-el v-if="curMusicTypeName" :label="curMusicTypeName" />
              </q-breadcrumbs>
              <div v-if="curTab=='collection'" class="full-width row items-center justify-between">
                  <q-breadcrumbs class="q-px-sm text-primary">
                      <div>
                          <q-breadcrumbs-el label="全部" icon="widgets" />
                          <!-- <q-breadcrumbs-el :label="curMusicTypeName" /> -->
                      </div>

                  </q-breadcrumbs>
                  <!-- <q-btn outline dense class="q-px-md q-mr-sm">一键加载</q-btn> -->
              </div>

              <q-breadcrumbs v-if="curTab=='like'" class="q-px-sm text-primary">

                  <q-breadcrumbs-el v-for="item in curLikePath" :key="item.mlf_id" :label="item.name" @click="handleLikeSelect(item.mlf_id)" class="cursor-pointer" />

              </q-breadcrumbs>

              <div class="col-grow row justify-end" v-if="curTab=='library'">
                  <q-btn class="q-mr-sm" v-if="!isSearch" flat dense :icon="sortIcon">
                      <q-menu dark>
                          <q-list dense style="min-width: 100px" class="shadow-7">
                              <q-item @click="handleLoadMusicEasy('name','mdi-sort-alphabetical-ascending')" clickable v-close-popup>

                                  <q-item-section>
                                      <div class="row no-wrap items-center">
                                          <q-icon class="q-mr-sm" name="mdi-sort-alphabetical-ascending" />
                                          <span>按名称排序</span>
                                      </div>

                                  </q-item-section>
                              </q-item>
                              <q-item @click="handleLoadMusicEasy('rate','mdi-star-outline')" clickable v-close-popup>

                                  <q-item-section>
                                      <div class="row no-wrap items-center">
                                          <q-icon class="q-mr-sm" name="mdi-star-outline" />
                                          <span>按评分排序</span>
                                      </div>
                                  </q-item-section>
                              </q-item>
                              <q-item @click="handleLoadMusicEasy('ctime','mdi-sort-clock-descending-outline')" clickable v-close-popup>

                                  <q-item-section>
                                      <div class="row no-wrap items-center">
                                          <q-icon class="q-mr-sm" name="mdi-sort-clock-descending-outline" />
                                          <span>按创建时间排序</span>
                                      </div>
                                  </q-item-section>
                              </q-item>
                              <q-separator />
                          </q-list>

                      </q-menu>
                  </q-btn>
                  <q-btn class="q-mr-sm" v-if="!isSearch" flat dense icon="search" @click="isSearch=true" />
                  <q-input v-if="isSearch" autofocus dark filled dense :debounce="200" @input="handleSearchInput" v-model="searchName" class="full-width" label="搜索">

                      <template v-slot:append>
                          <q-icon name="close" @click="handleSearchClose" class="cursor-pointer" />

                      </template>

                  </q-input>
              </div>

          </div>

      </q-page-sticky>

  </q-page>
  </template>

  <script>
  import {
      loadMusicList,
      updateMusicDuration,
      loadMusicListByType,
      loadCollectionList,
      searchMusicLibrary,
      loadLikeList

  } from "assets/api/studio/music"
  import {
      getSeconds
  } from "assets/utils/stodate";
  export default {
      name: 'MusicPage',
      components: {
          MusicList: () => import('components/studio/MusicList.vue')
      },
      props: {
          user: {
              type: Object
          },
          isPlay: {
              default: false
          },
          curTab: {
              type: String,
              default: 'library'
          },
          typeOptions: {
              type: Array
          }
      },
      data() {
          return {
              tab: 'library',
              isSearch: false,
              projectInfo: {},
              pid: '',
              musicList: [],
              pageNum: 1,
              pageSize: 50,

              curMusicType: '',
              curMusicTypeName: '',
              isLoadType: false,
              searchName: '',
              collectionList: [],
              count: 0,
              sortType: 'name',
              sortIcon: 'mdi-sort-alphabetical-ascending',
              isLoading: true,

              likeList: [],
              curLikePath: [{
                  mlf_id: 0,
                  name: '全部',
              }]

          };
      },
      created() {
          this.pid = this.$route.params.pid;
          let projectInfo = this.$storage.getItem(this.pid);

          this.projectInfo = projectInfo;

      },
      mounted() {
          this.handleLoadMusicList()

      },
      methods: {
          handleSearchClose() {
              if (this.searchName) {
                  this.handlePageNumReset()
                  this.handleLoadMusicEasy()
              }
              this.searchName = '';
              this.isSearch = false;

          },
          handleLoadMusicEasy(val, icon) {
              if (val) {
                  this.sortType = val;
                  this.sortIcon = icon;
                  this.handlePageNumReset();
              }

              if (this.curMusicType) {
                  this.handleLoadMusicByType()
              } else {
                  this.handleLoadMusicList()
              }
          },
          handleSearchMusicList() {

              if (this.curMusicType) {

                  var type = this.curMusicType
              } else {
                  var type = '0'
              }
              searchMusicLibrary({
                  type,
                  sortType: this.sortType,
                  name: this.searchName,
                  pageNum: this.pageNum,
                  pageSize: this.pageSize
              }).then(res => {
                  // console.log(res.data);
                  //this.isMusicLoad=false;
                  if (res.data.code == 1) {
                      let data = res.data.data;
                      let format_data = this.formatMusicList(data)

                      this.$emit('update', format_data)
                      this.musicList = format_data;
                  }
              })
          },

          //like
          handleLoadLikeList(mlf_id) {
            this.isLoading=true;
              loadLikeList({
                  mlf_id: mlf_id
              }).then(res => {
                this.isLoading=false;
                  if (res.data.code == 1) {

                      let data = res.data.data;
                      console.log(data,'loadlike');

                      let format_data = this.formatMusicList(data)

                      this.$emit('update', format_data)
                      this.likeList = format_data;

                  }
              })
          },
          handleLikeSelect(mlf_id) {
              this.$emit('likeSelect', mlf_id)
          },

          //collection
          handleLoadCollectionList() {
            this.isLoading=true;
              loadCollectionList({
                  pid: this.pid
              }).then(res => {
                  if (res.data.code == 1) {
                      console.log(res.data.data);

                      let data = res.data.data;
                      let format_data = this.formatMusicList(data)

                      this.$emit('update', format_data)
                      this.collectionList = format_data;
                      console.log(this.collectionList);
                      //this.scrollStyle.width = this.$refs.MusicPage.$el.offsetWidth + 'px';
                  }
              })
          },
          handleSearchInput(v) {
              console.log(v);
              this.handlePageNumReset()
              this.handleSearchMusicList()
          },
          handlePageNumReset() {
              this.pageNum = 1;
              this.$refs.MusicList.pageNum = 1;
          },
          handleLoadMusicByType(type) {
              this.isLoadType = true
              this.isLoading=true;
              loadMusicListByType({
                  type: this.curMusicType,
                  sortType: this.sortType,
                  pageNum: this.pageNum,
                  pageSize: this.pageSize
              }).then(res => {

                  if (res.data.code == 1) {
                      //this.isMusicLoad=false;
                      let data = res.data.data;
                      let format_data = this.formatMusicList(data)

                      this.$emit('update', format_data)
                      this.musicList = format_data;
                  }

              })
          },

          handlePageWidth() {


          },
          handlePageHeight(val, i) {

              // this.scrollStyle.height = i - val - 50 + 'px';

              this.handlePageWidth();
              return {
                  height: i - val + 'px'
              }

          },

          handleUpdateDuration(duration, music_id) {
              updateMusicDuration({
                  duration,
                  music_id
              }).then(res => {
                  if (res.data.code == 1) {
                      let index = this.musicList.findIndex(i => i.music_id == music_id)
                      console.log(index, 'index');
                      this.musicList[index].duration = duration
                      this.musicList[index].format_duration = getSeconds(duration)
                  }
              })
          },
          handleTabChange(item) {
              console.log(item);
              this.$emit('update:curTab', item)

          },

          handleReload(num) {
              console.log(num, '页面跳转');
              this.musicList=[]
              this.pageNum = num;

              this.isLoading=true;

              if (this.searchName) {
                  this.handleSearchMusicList()
              } else {
                  if (this.curTab == "library") {
                      if (this.isLoadType) {
                          this.handleLoadMusicByType(this.curMusicType)
                      } else {
                          this.handleLoadMusicList()
                      }
                  }
                  if (this.curTab == 'collection') {
                      this.handleLoadCollectionList()
                  }
              }

          },
          formatMusicList(data) {
              if (data.length > 0) {
                  this.count = data[0].count;
                  this.$emit('update:dataCount', this.count)
                  console.log(data, 'formatList');
                  let newdata = []

                  this.$refs.MusicList.total = Math.ceil(data[0].count / this.pageSize);
                  data.forEach(i => {
                      i.poster = this.GLOBAL.serveurl + '/data/img/cover.jpeg'
                      i.vid = i.music_id;
                      if (i.mc_id) {
                          i.isCollect = true
                      } else {
                          i.isCollect = false
                      }

                      i.type = JSON.parse(i.type)
                      i.format_duration = ""
                      if (i.duration) {
                          i.format_duration = getSeconds(i.duration)
                      }

                      if (i.isDirectory == 0) {
                          i.src = this.GLOBAL.serveurl + '/musicdata/' + i.path + '/main.mp3'
                      } else {
                          i.src = this.GLOBAL.serveurl + '/musicdata/' + i.path
                      }
                      newdata.push(i)

                  })
                  this.isLoading=false;
                  return newdata
              } else {
                  return data
              }

          },

          handleLoadMusicList() {
              this.isLoadType = false;
              this.isLoading=true;
              loadMusicList({
                  pid: this.pid,
                  pageNum: this.pageNum,
                  pageSize: this.pageSize,
                  sortType: this.sortType,
              }).then(res => {

                  //this.isMusicLoad=false;
                  if (res.data.code == 1) {
                      let data = res.data.data;


                      let format_data = this.formatMusicList(data)

                      this.$emit('update', format_data)
                      this.musicList = format_data;
                      this.isLoading = false;

                  }
              })
          },
          handleImg() {
              this.isImgDialog = false;
          },
          changeSelectedItem(music_id) {
              this.$refs.MusicList.selectedItem = music_id
          },

          handleItemClick(item, index, music_id) {
              console.log(item, index, music_id);
              // this.selectedItem = item.music_id;
              this.$emit('player', 'setIndex', index, music_id, item)

          },

      }

  };
  </script>
